<template>
	<view>
      <!-- 头部导航 -->
        <uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed='true' color="#fff" title="租赁对账单详情"  left-icon="left"   @clickLeft="backFn" rightText="修改" @clickRight="toaddStatement" ></uni-nav-bar>
		
		<view class="box_top">
			<view class="application_one">{{data.number}}</view>
			<view class="desc">客户名：{{data.customerName}}</view>
			<view class="desc">签订人：{{data.signRenName}}</view>
			<view class="desc_date">申请日期：{{data.applyDate}}</view>
		</view>
		<view style="width: 100%;height: 250px;margin-bottom: 10px;background-color: #fff;">
			<u-cell title="审批进度"></u-cell>
			<u-steps :current="parseFloat(active)-1"   direction="row" style='margin-left: 10px;margin-top: 20px;' >
					<u-steps-item v-for="item in ApprovalList"  :title="item.updateBy" :desc="item.remark">
						<text class="slot-icon" slot="icon">{{item.role.substr(0,1)}}</text>
					</u-steps-item>
			</u-steps>
						<view style="padding-left: 15px;">
							抄送人：
						</view>
						<view  style="padding-left: 15px;margin-top: 10px;display: flex;">
							<view v-for="item in copylist" style="position: relative; padding-right: 10px;">
								<u-avatar  name="nan" :text="item.copyerName.substr(0,1)" fontSize="18" ></u-avatar>
								 <u-icon v-if="item.copyerStatus==='1'" color="#13ce66" name="checkmark-circle-fill" style="position: absolute;top: 0;right: 5px"></u-icon>
							</view>
							
						</view>
			 <view v-if="buttonShow"  class="" style="width: 60%;padding-top: 20px; margin: 0 auto;  display:flex">
			 	     <u-button :plain="true" :hairline="true"  type="success"  style="background-color: #ccc;color: #fff;width: 95px;height: 30px;">暂无</u-button>
			         <u-button   :plain="true" :hairline="true"  type="success" style="margin-right: 5px;background-color: #13ce66;color: #fff;width: 95px;height: 30px;" @click="btnOk">同意</u-button>
			 </view>
		</view>
		<!-- 同意 -->
		<u-popup :show="showAgree" mode="center"  customStyle="width:80%">
			
			<u-cell style="margin:5px">
				<template #title>
				    <view class="titcolor" style="font-size: 20px;color: ;">审批意见</view>
				</template>
			</u-cell>
		           <view  style="margin:20px">
		              <u--textarea placeholder="请填审批意见~" v-model="approvalForm.remark"></u--textarea> 
		           </view>
				   <view  class="button" style="width: 94%; display: flex;margin: 0px 10px auto;padding-bottom: 15px;padding-left: 4px;">
				   	<u-button  :hairline="true"    style="width: 130px;height: 35px;" @click="showAgree=false">取消</u-button>
					<u-button   :hairline="true"  type="success" style="width: 130px;height: 35px;" @click="approverFn">确认</u-button>
				   </view>
				   
		</u-popup>
		<!-- 驳回去驳回 -->
		<u-popup :show="showRefouse" mode="center"  customStyle="width:80%">
			
			<u-cell style="margin:5px" >
				<template #title>
				    <view class="titcolor" style="font-size: 20px;color: ;">审批意见</view>
				</template>
			</u-cell>
		           <view  style="margin:5px">
		              <u--textarea placeholder="请填审批意见~" v-model="approvalForm.remark"></u--textarea> 
		           </view>
				   <view class="button" style="width: 100%; display: flex;">
				   	<u-button   :hairline="true"    style="margin: 4px;" @click="showRefouse=false">取消</u-button>
					<u-button   :hairline="true"  type="success" style="margin: 3px;" @click="approverReFn">确认</u-button>
				   </view>
				   
		</u-popup>
		<view class="customer">
			<view>
				<uni-icons class="icon" type="calendar-filled" size="20" color="#55aaff">
				</uni-icons>
				<span class="name">{{data.customerName}}</span>
			</view>
			<uni-icons type="forward" size="20" color="#ccc"></uni-icons>
		</view>
		<view class="Buttom">
			<view class="left">
			<uni-icons class="icon"size="20" color="#fd9540" type="person-filled"></uni-icons> 
			<span class="name">{{data.signRenName}}</span>
			</view>
			<view class="left">
			<uni-icons class="icon" size="20" color="#55aaff" type="calendar-filled"></uni-icons>
			<span class="name" v-if="data.status==1">正常</span>
			<span class="name" v-if="data.status==2">完结</span>
			</view>
		</view>
		<view class="moneyInfo">
			<view class="top">
				<uni-icons class="icon" size="28" type="settings-filled" color="#fd9540"></uni-icons>
				<span class="name">金额信息</span>
			</view>
					<uni-grid :column="3" :showBorder="false" class="grid">
						<uni-grid-item>
							<text class="text">
								<span>{{data.rentPaid}}</span>
								<span>实收租金</span>
							</text>
						</uni-grid-item>
						<uni-grid-item>
							<text class="text">
								<span>{{data.depositPaid}}</span>
								<span>实收押金</span>
							</text>
						</uni-grid-item>
						<uni-grid-item>
							<text class="text">
								<span>{{data.refundableDeposit}}</span>
								<span>应退押金</span>
							</text>
						</uni-grid-item>
						
					</uni-grid>
		</view>
		<!-- tab切换 -->
		  <u-tabs :list="list" class="tabs" lineColor="#fd9540" lineWidth="85px" 
					:activeStyle="{ color: '#fd9540', fontWeight: 'bold', transform: 'scale(1.05)'}"
					:current="index"   @change="index=$event.index" ></u-tabs>
		
		<view>
			<view v-if="index==0">
				<u-cell class="bg"> 
					<template #title>
						<view style="font-size: 12px;color: #8c8c8c;">基础信息</view>
					</template>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >发起人</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.sponsorName}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >业务员</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.salesmanName}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >签订人名称</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.signRenName}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >协同人名称</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.collaboratorName}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >申请日期</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.createTime}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >对账单编号</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.number}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >客户名称</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.customerName}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >业务所属公司</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{businessCompany}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >订单编号</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.orderNo}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >项目名称</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.projectName}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >项目信息来源</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{projectSource}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >日租金合计</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.totalDailyRent}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >应收租金</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.rentReceivable}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >租金折让金额</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.rentAllowanceAmount}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >折让说明</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.rentAllowanceDescription}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >其他费用总额</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.totalOtherExpenses}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >应扣费用总额</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.totalDeductibleExpenses}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >物流费用总额</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.totalLogisticsExpenses}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >维修费用总额</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.totalMaintenanceCost}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >税率</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.taxRatio}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >税费</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.taxAmount}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >项目毛利</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.estimateProjectProfit}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >合伙人分成比例</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.partnerRatio}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >合伙人分成金额</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.partnerAmount}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >项目剩余毛利</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.residualProjectProfit}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >业务员分成比例</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.salesmanRatio}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >业务员分成金额</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.salesmanAmount}}</text>
					</view>
				</u-cell>
				
				
				
				
			</view>
			<view v-if="index==1">
				<u-cell class="bg">
					<template #title>
						<view style="font-size: 12px;color: #8c8c8c;">收取客户其他费用</view>
					</template>
				</u-cell>
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">费用类别</uni-th>
						<uni-th align="center">数量</uni-th>
						<uni-th align="center">单位</uni-th>
						<uni-th align="center">类别总金额</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in data.otherExpensesList">
						<uni-td align="center">{{item.expenseCategory}}</uni-td>
						<uni-td align="center">{{item.quantity}}</uni-td>
						<uni-td align="center">{{item.unit}}</uni-td>
						<uni-td align="center">{{item.totalAmount}}</uni-td>
					</uni-tr>
					
				</uni-table>
			</view>
			<view v-if="index==2">
				<u-cell class="bg">
					<template #title>
						<view style="font-size: 12px;color: #8c8c8c;">项目应扣费用</view>
					</template>
				</u-cell>
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">费用类别</uni-th>
						<uni-th align="center">金额</uni-th>
						<uni-th align="center">单位</uni-th>
						<uni-th align="center">是否已支付</uni-th>
						<uni-th align="center">支付方</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in data.deductibleExpensesList">
						<uni-td align="center">{{item.expenseCategory}}</uni-td>
						<uni-td align="center">{{item.amount}}</uni-td>
						<uni-td align="center">{{item.unit}}</uni-td>
						<uni-td align="center">{{item.hasPaid}}</uni-td>
						<uni-td align="center">{{item.payer}}</uni-td>
					</uni-tr>
					
				</uni-table>
			</view>
			<view v-if="index==3">
				<u-cell class="bg">
					<template #title>
						<view style="font-size: 12px;color: #8c8c8c;">物流及辅料费用</view>
					</template>
				</u-cell>
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">费用类别</uni-th>
						<uni-th align="center">金额</uni-th>
						<uni-th align="center">数量</uni-th>
						<uni-th align="center">型号</uni-th>
						<uni-th align="center">日期</uni-th>
						<uni-th align="center">付款单位</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in data.logisticsExpensesList">
						<uni-td align="center">{{item.expenseCategory}}</uni-td>
						<uni-td align="center">{{item.amount}}</uni-td>
						<uni-td align="center">{{item.quantity}}</uni-td>
						<uni-td align="center">{{item.model}}</uni-td>
						<uni-td align="center">{{item.expenseDate}}</uni-td>
						<uni-td align="center">{{item.payer}}</uni-td>
						
					</uni-tr>
					
				</uni-table>
			</view>
			<view v-if="index==4">
				<u-cell class="bg">
					<template #title>
						<view style="font-size: 12px;color: #8c8c8c;">维修、配件费用</view>
					</template>
				</u-cell>
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">费用类别</uni-th>
						<uni-th align="center">单位</uni-th>
						<uni-th align="center">金额</uni-th>
						<uni-th align="center">备注</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in data.maintenanceCostList">
						<uni-td align="center">{{item.expenseCategory}}</uni-td>
						<uni-td align="center">{{item.unit}}</uni-td>
						<uni-td align="center">{{item.totalAmount}}</uni-td>
						<uni-td align="center">{{item.remark}}</uni-td>
					</uni-tr>
					
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	import {getStatementInfoApi} from '@/api/accountStatement.js'
	import {getapprovalRecodeList,editapprovalRecode} from '@/api/approvaRecode.js'
	import {getcopylist,editcopyapi} from '@/api/copy.js'
	import{getDicts} from '@/api/dictionary/index.js'
	export default {
		data() {
			return {
				index:0,
				data:{},
				list:[
					{name:'基础信息'},
					{name:'收取客户其他费用'},
					{name:'项目应扣费用对象'},
					{name:'物流及辅料费用对象'},
					{name:'维修、配件费用'},
				],
				businessCompanyOptions:[],
				businessCompany:'',
				projectSourceOptions:[],
				projectSource:'',
				// 审批抄送
				ApprovalList:[
					 
				],//审批人列表
				active:0,
				buttonShow:false,//是否显示审批按钮
				showAgree:false,//同意弹框
				showRefouse:false,//驳回弹框
				approvalForm:{
					
				},//审批信息
				copylist:[],
				ids:{}
			};
		},
		onLoad(e) {
			console.log(e);
			this.ids=e
			this.getProjectSource()
			this.getBusinessCompany()
			this.initData(e)
			// this.changecopy()	
		},
		created() {
			
		 setTimeout(()=>{
			 this.changecopy()
		 },5000)
		},
		methods:{
			async initData(e){
				let res=await getStatementInfoApi(e.id)
				console.log(res);
				this.data=res.data
				this.businessCompany=this.getValue(this.businessCompanyOptions,res.data.businessCompany)
				this.projectSource=this.getValue(this.projectSourceOptions,res.data.projectSource)
			    // 获取审批人信息
			 let res2=await getapprovalRecodeList({serialNum:this.data.number})
			 var arr1=[]
			  res2.rows.forEach((item,index)=>{
				  if(item.approverName==item.updateBy){
					  arr1.push(item)
				  }
				 
			  })
			res2.rows.forEach(item=>{
				let num=JSON.stringify(arr1).indexOf(JSON.stringify(item.role))
				if(num==-1){
					arr1.push(item)
				}
			})
			  
			
			   var arr=arr1
				for(var i=0;i<arr.length;i++){
				  for(var j=i+1;j<arr.length;j++){
				    //如果第一个比第二个大，就交换他们两个位置
				    if( arr[i].sequence>arr[j].sequence){
				      var temp = arr[i];
				      arr[i] = arr[j];
				      arr[j] = temp;
				    }
				  }
				}
				this.ApprovalList=arr
				this.active=0
				this.ApprovalList.forEach(item=>{
				  	if(item.approvalStatus==="completed"){
				  				this.active++
				  			  }
				  			})
			//判断按钮是否显示
		this.ApprovalList.forEach(item=>{
			console.log('11');
		   if(item.approvalStatus=='approve'){
								
	        if(this.$store.getters.userid==item.approverId){
				console.log(this.$store.getters.userid,item.approverId);
				this.buttonShow=true } } })
			let res3=await getcopylist({serialNum:this.data.number})
				this.copylist=res3.rows
			},
			
	// 同意
		btnOk(){
						this.showAgree=true
					},
	// 拒绝
		btnRe(){
						this.showRefouse=true
					},
					// 同意审批
					async approverFn(){
						this.approvalForm.serialNum=this.data.number
						this.approvalForm.typeOperation="agree"
						this.showAgree=false
						  this.buttonShow=false
						await editapprovalRecode(this.approvalForm)
						this.$refs.uToast.show({
							type:'success',
							message:'审批成功'
						})
						
						await this.initData(this.ids)
						 
					},
					// 拒绝
					async approverReFn(){
						this.approvalForm.serialNum=this.data.number
						this.approvalForm.typeOperation="rejected"
						this.buttonShow=false
						this.showRefouse=false
						await editapprovalRecode(this.approvalForm)
						this.$refs.uToast.show({
							type:'success',
							message:'成功驳回'
						})
						await this.initData()
					},
					// 抄送 点击详情页面即为查看
					async changecopy(){
						 let res=await getcopylist({serialNum:this.data.number})
						 res.rows.forEach(item=>{
							 if(item.copyerId===this.$store.getters.userid){
								 console.log('2211');
								 editcopyapi({copyerId:this.$store.getters.userid,serialNum:this.data.number}).then(res=>{
									 this.initData()
								 })
							     
							 }
						 })
					},
					
			// 获取业务所属公司
			getBusinessCompany(){
				getDicts('biz_business_company').then(res=>{
					this.businessCompanyOptions=res.data
				})
			},
			// 获取项目信息来源
			getProjectSource(){
				getDicts('biz_project_source').then(res=>{
					this.projectSourceOptions=res.data
				})
			},
			
			getValue(arr,item){
				for(var i=0;i<arr.length;i++){
					if(item==arr[i].dictValue){
						return arr[i].dictLabel
					}
				}
			},
			// 返回上一级
			backFn(){
				 uni.navigateBack({delta:1})
			},
			toaddStatement(){
				uni.navigateTo({
					url:'/pages/accountStatement/addStatement/addStatement?id='+this.data.id
				})
			}
		}
	}
</script>

<style lang="scss">
.box_top{
	position: relative;
	min-height: 50px;
	padding: 10px;
	// margin: 10px 5px 0 5px;
	background-color: #fff;
	border-bottom: solid 1px #c3c3c3;
	.application_one{
				  font-size: 16px;
				  font-weight: 600;
				  padding-bottom: 8px;
	}
	.desc{
				  font-size: 12px;
				  color:#8c8b8a;
				 .desc_text{
					 color: #fd9540;
				 }
	}
	.desc_date{
		padding-bottom: 10px;
		font-size: 12px;
		color:#8c8b8a;
	 }
	 
	
}
.customer{
	background-color: #fff;
	min-height: 40px;
	line-height: 40px;
	padding-left: 5px;
	display: flex;
	justify-content: space-between;
	.icon{
		vertical-align: middle;
		margin-right: 10px;
	}
	.name{
		font-size: 13px;
		color: #c3c3c3;
	}
}
.Buttom{
			 border-top: 1px solid #ccc;
			 display: flex;
			 justify-content: space-between;
			min-height: 35px;
			 background-color: #fff;	
			 // margin: 0 5px;
		 .left{
				width: 50%;
				height: 35px;
				line-height: 35px;
				padding-left: 10px;
			 
				.icon,.name{
					vertical-align:middle;
					font-size: 13px;
				 }
				.name{
				padding-left: 10px;
				}
				 
				}
				.left{
					border-right: 1px solid #ccc;
				}
				.right{
					padding-left: 5px;
				}
		}
	
   .moneyInfo{
	   background-color: #fff;
	   min-height: 120px;
	   margin: 10px 0;
	   padding: 10px;
	   .top{
		   .icon,.name{
			   vertical-align:middle;
		   }
		   .icon{
		   	margin-right: 10px;
		   }
		   margin-bottom: 10px;
		   
	   }
	   .grid{
		 display: flex;  
		 justify-content: space-around;
		 .text{
		 	min-height:  100px;
		 	background-color: #f5efef;
		 	margin-right: 5px;
		 	text-align: center;
		 	display: flex;
		 	flex-direction: column;
		 	justify-content: space-around;
		 	border-radius: 10px;
		 	span{
		 		 display: block;
		 		 padding-top: 10px;
		 		 color: #8b8b8b;
		 	}
		 }
	   }
   }
   .tabs{
	   background-color: #fff;
   }
   .bg{
	   background-color: #fff;
   }
   .slot-icon {
   		width: 21px;
   		height: 21px;
   		background-color: #349ff1;
   		border-radius: 100px;
   		font-size: 12px;
   		color: #fff;
   		line-height: 21px;
   		text-align: center;
   	}
   
</style>
